<script lang="ts">
export default {
  name: 'Login'
}
</script>

<script setup lang="ts">
import LoginFooter from './components/LoginFooter.vue'
import LoginForm from './components/LoginForm.vue'
import LoginHeader from './components/LoginHeader.vue'
</script>

<template>
  <div class="page-login">
    <!-- 头部 -->
    <LoginHeader />
    <!-- 主体-登录区域 -->
    <section class="login-section">
      <div class="wrapper">
        <nav>
          <a class="active" href="javascript:;">账户登录</a>
          <a href="javascript:;">扫码登录</a>
        </nav>
        <LoginForm />
      </div>
    </section>
    <!-- 底部 -->
    <LoginFooter />
  </div>
</template>

<style lang="less" scoped>
.login-section {
  position: relative;
  height: 488px;
  background: url(@/assets/images/login-bg.png) no-repeat center / cover;

  .wrapper {
    position: absolute;
    left: 50%;
    top: 54px;
    width: 380px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    transform: translate3d(100px, 0, 0);

    nav {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      padding: 0 40px;
      height: 55px;
      font-size: 14px;
      text-align: right;
      border-bottom: 1px solid #f5f5f5;

      a {
        flex: 1;
        display: inline-block;
        position: relative;
        font-size: 18px;
        line-height: 1;
        text-align: center;

        &.active {
          font-weight: 700;
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
